<template>
  <div class="reportManageWrap">
    <div class="pageTableInner">
    <div class="infoSearchWrap">
      <div class="infoSearchOne">
        <el-row :gutter="10">
          <el-col :span="5">
            <div class="searchWrap">
              <span class="searchFont">举报类型:</span>
              <span class="searchInputFont">
               <el-select v-model="searchInfo.reportType" @change="searchRowsInfo()" size="mini" clearable placeholder="举报类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              </span>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="searchWrap">
              <span class="searchFont">举报编号:</span>
              <span class="searchInputFont">
                 <el-input style="width: 100%;" clearable size="mini" v-model="searchInfo.reportNo" @change="searchRowsInfo" auto-complete="off" placeholder="举报编号"></el-input>
              </span>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="searchWrap">
              <span class="searchFont">责任企业:</span>
              <span class="searchInputFont">
                    <el-select v-model="searchInfo.enterpriseNo" size="mini" @change="searchRowsInfo" clearable placeholder="全部">
                      <el-option
                        v-for="item in this.$store.state.companyInfos"
                        :key="item.enterpriseNo+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseNo+''">
                      </el-option>
                    </el-select>
                </span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="searchWrap">
              <span class="searchFont">案件性质:</span>
              <span class="searchInputFont">
                 <el-select v-model="searchInfo.hasTrue" @change="searchRowsInfo()" size="mini" clearable placeholder="案件性质">
                      <el-option
                        v-for="item in options4"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="infoSearchOne">
        <el-row :gutter="10">
          <el-col :span="5">
            <div class="searchWrap">
              <span class="searchFont">处置状态:</span>
              <span class="searchInputFont">
                 <el-select v-model="searchInfo.reportStatus" @change="searchRowsInfo()" size="mini" clearable placeholder="处置状态">
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </span>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="searchWrap">
              <span class="searchFont">行政区域:</span>
              <span class="searchInputFont" >
                  <el-select v-model="searchInfo.districtId" :disabled="$store.state.userInfo.regionId?true:false" @change="searchRowsInfo()" size="mini" clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
            </div>            
          </el-col>          
          <el-col :span="7">
            <div class="searchWrap">
              <span class="searchFont">举报日期:</span>
              <span class="searchInputFont">
                 <el-date-picker
                   style="width: 100%;"
                   v-model="value6"
                   type="daterange"
                   align="left"
                   @change="searchRowsInfo()"
                   placeholder="选择日期范围"
                   size="mini"
                   :picker-options="$store.state.pickerOptions2">
                  </el-date-picker>
                </span>
            </div>
          </el-col>
          <div style="float: right;margin-right:10px; ">
            <el-button type="primary" size="small" @click="searchRowsInfo()">查询</el-button>
          </div>
        </el-row>
      </div>
    </div>
    <div class="tableContainer" style="top:120px;">
      <div class="tableInner"> 
        <el-table
          ref="multipleTable"
          :data="rows"
          stripe
          :height="tableHeight"
          tooltip-effect="dark"
          @selection-change="changeFun"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            @selection-change="changeFun">
          </el-table-column>
          <el-table-column
            prop="reportNo"
            label="举报编号"
            width="150px"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="案件来源"
            prop="reportResource"
          >
            <template slot-scope="scope">
              {{scope.row.reportResource == 1 ? '政府巡查' : scope.row.reportResource == 2 ? '群众举报' : scope.row.reportResource == 3 ? '智能案件' :""}}

              </template>
          </el-table-column>
          <el-table-column
            label="举报类型"
            show-overflow-tooltip
            width="120px"
          >
            <template slot-scope="scope">
              <span style="margin-right: 5px;" v-for="(item,index) in (scope.row.reportType ? scope.row.reportType.split(',') : [])" :key="index">
                {{item==1 ? '乱停乱放' : item==2 ? '损坏车辆' : item==3 ? '其它' : item==4 ? '违规投放' : item==5 ? '区域超量' : ""}}                
              </span>
              <span style="margin-right: 5px;" v-show="scope.row.hasViolation">违规投放</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="enterpriseName"
            label="责任企业"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="处理状态"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{scope.row.reportStatus==0? '未处理' :scope.row.reportStatus==1? '已推送' :scope.row.reportStatus==2? '已处理' :scope.row.reportStatus==3? '已结案' :""}}
            </template>
          </el-table-column>
          <el-table-column
            prop="districtName"
            label="案件区域"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="是否属实"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{scope.row.hasTrue==0? '待核实' :scope.row.hasTrue==1? '不属实' :scope.row.hasTrue==2? '重复案件' :scope.row.hasTrue==3? '属实' :""}}
            </template>
          </el-table-column>
          <el-table-column
            label="是否超时"
            prop="hasOvertime"
            width="100"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.hasOvertime == 0? '未超时' : scope.row.hasOvertime == 1 ? '已超时' : ""}} 
              </template>
          </el-table-column>
          <el-table-column
            prop="reportTime"
            label="举报时间"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            v-if="$store.state.btnMenuIds.indexOf(185)>-1"
            label="操作"
            width="100"
            >
            <template slot-scope="scope">
              <router-link :to="'/reportManage/reportDetail/'+scope.row.detailId">
                <i  class="iconfont icon-chakan" ></i>
              </router-link>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="Pagination" style="text-align: left;margin-top: 10px;">
        <el-row :gutter="10">
          <el-col :span="9">
            <el-checkbox v-model="checkAll" @change=" toggleSelection(rows)">全选</el-checkbox>
            &nbsp;&nbsp;
            <el-button v-if="$store.state.btnMenuIds.indexOf(150)>-1"   size="small" @click="handleChecked()">
              批量结案
            </el-button>

          </el-col>
          <el-col :span="13">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchInfo.page"
              :page-sizes="[10, 30, 50, 100,200]"
              :page-size="searchInfo.rows"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count">
            </el-pagination>
          </el-col>
        </el-row>
      </div>
      <!--修改站点-->
      <el-dialog title="查看详情" :visible.sync="dialogFormVisible" >
        <el-row style="line-height: 26px;">
          <el-col :span="8"> 举报时间：{{ruleFormEdit.reportTime}}</el-col>
          <el-col :span="7"> 处理状态：{{ruleFormEdit.reportStatus==0? '未处理' :ruleFormEdit.reportStatus==1? '已处理' :ruleFormEdit.reportStatus==2? '已退回' :ruleFormEdit.reportStatus==3? '已结案' :""}}</el-col>
          <el-col :span="9"> 举报编号：{{ruleFormEdit.reportNo}}</el-col>
        </el-row>
        <el-row style="line-height: 26px;">
          <el-col :span="8"> 企业名称：{{ruleFormEdit.enterpriseName}}</el-col>
          <el-col :span="7"> 是否属实：{{ruleFormEdit.hasTrue==0? '待核实' :ruleFormEdit.hasTrue==1? '不属实' :ruleFormEdit.hasTrue==2? '重复案件' :ruleFormEdit.hasTrue==3? '属实' :""}}</el-col>
          <el-col :span="9"> 举报类型：            
            <span v-for="(item,index) in (ruleFormEdit.reportType ? ruleFormEdit.reportType.split(',') : [])" :key="index" style="margin-right: 5px;">
              {{item==1? '乱停乱放' :item==2? '损坏车辆' :item==3? '其它' :""}}
            </span>            
            <span style="margin-right: 5px;" v-show="ruleFormEdit.isViolation">违规投放</span>
          </el-col>
        </el-row>
        <el-row style="line-height: 26px;">
          <el-col :span="8"> 处理人员：{{ruleFormEdit.processUserName}}</el-col>
          <el-col :span="7"> 处理时间：{{ruleFormEdit.processTime}}</el-col>
          <el-col :span="9"> 区域：{{ruleFormEdit.districtName}}</el-col>
        </el-row>
        <el-row v-show="ruleFormEdit.closeTime" style="line-height: 26px;">
          <el-col :span="8"> 结案时间：{{ruleFormEdit.closeTime}}</el-col>
        </el-row>
        <div v-show="ruleFormEdit.illegal.length>0" style="line-height: 26px;">违投车辆编号：<span v-for="(item,index) in ruleFormEdit.illegal" :key="index" style="margin-right: 10px;">{{item}}</span></div>
        <div v-show="ruleFormEdit.legal.length>0" style="line-height: 26px;">正常车辆编号：<span v-for="(item,index) in ruleFormEdit.legal" :key="index" style="margin-right: 10px;">{{item}}</span></div>
        <el-row style="line-height: 26px;margin-top:5px;">
          <el-col :span="8">
            <div v-show="ruleFormEdit.reportImages.length>0">
              <span style="vertical-align: top;">举报照片:</span>
              <span v-for="(item,index) in ruleFormEdit.reportImages" :key="index">
                <img @click="prviewImg(item.photoUrl)" style="width: 50px;height:50px;border-radius: 5px;cursor: pointer;margin-left: 5px;" :src="item.photoUrl" alt="">
              </span>
            </div>
          </el-col>
          <el-col :span="8">
            <div v-show="ruleFormEdit.preImages.length>0">
              <span style="vertical-align: top;">处理前照片:</span>
              <span v-for="(item,index) in ruleFormEdit.preImages" :key="index">
                <img @click="prviewImg(item.photoUrl)" style="width: 50px;height:50px;border-radius: 5px;cursor: pointer;margin-left: 5px;" :src="item.photoUrl" alt="">
              </span>
            </div>
          </el-col>
          <el-col :span="8">
            <div v-show="ruleFormEdit.afterImages.length>0">
              <span style="vertical-align: top;">处理后照片:</span>
              <span v-for="(item,index) in ruleFormEdit.afterImages" :key="index">
                <img @click="prviewImg(item.photoUrl)" style="width: 50px;height:50px;border-radius: 5px;cursor: pointer;margin-left: 5px;" :src="item.photoUrl" alt="">
              </span>
            </div>
          </el-col>
        </el-row>
        <el-row style="line-height: 26px;">
          <el-col :span="6"> 用户手机：{{ruleFormEdit.mobile}}</el-col>
          <el-col :span="18"> 经纬度：{{ruleFormEdit.lng}} &nbsp;{{ruleFormEdit.lat}}</el-col>
        </el-row>
        <div style="font-size: 14px;margin-bottom: 6px;">
          举报内容：{{ruleFormEdit.reportContent}}
        </div>
        <div style="font-size: 14px;">
          举报位置：{{ruleFormEdit.districtName}}{{ruleFormEdit.detailAddress}}
        </div>
        <setAreaMap :centerLatLng="centerLatLng"></setAreaMap>
        <div style="margin-top: 20px;text-align: center;">
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
      </el-dialog>
      <el-dialog
        title="照片预览"
        @opened="$store.commit('dialogTop')"
        :visible.sync="dialogVisible"
        size="tiny"
        class="width500"
       >
        <div style="text-align: center;font-size: 16px;margin-bottom: 8px;">{{textImg}}</div>
            <el-carousel style="width: 100%;height: 100%;" indicator-position="outside" :autoplay="false" height="500px" ref="carousel" @change="changeFunImg">
              <el-carousel-item style="width: 100%;"  v-for="(item,index) in allImgs" :key="index"  >
                <img style="width: 100%;height: 100%;" :src="item.photoUrl" alt="">
              </el-carousel-item>
            </el-carousel>
       <!-- <div style="text-align:center;margin-top: 10px">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>-->

      </el-dialog>
    </div>
    </div>
    <router-view @prviewImg="prviewImg" @searchRowsInfo="searchRowsInfo"></router-view>
  </div>
</template>

<script>
  import setAreaMap from "./setAreaMap.vue"
  export default {
    props:[],
    data(){

      return {        
        options: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '1',
            label: '乱停乱放'
          },{
            value: '2',
            label: '损坏车辆'
          }, {
            value: '3',
            label: '其他'
          }, {
            value: '4',
            label: '违规投放'
          }, {
            value: '5',
            label: '区域超量'
          }
        ],
        options1: [],
        options2: [
          {
          value: '0',
          label: '未处理'
        }, {
          value: '1',
          label: '已推送'
        },  {
          value: '2',
          label: '已处理'
        },  {
            value: '3',
            label: '已结案'
          }],
        options4: [
          {
            value: '0',
            label: '待核实'
          },
          {
          value: '1',
          label: '不属实'
        },{
          value: '2',
          label: '重复案件'
        }, {
          value: '3',
          label: '属实'
        }],
        rows:[],
        allImgs:[],
        imgKey:"",
        tableHeight:400,
        previewImg:"",
        textImg:"处理前",
        currentRow: null,
        dialogVisible: false,
        pageSize:10,
        loading: true,
        count: 0,
        currentPage: 1,
        //以下为搜索
        value6: "",
        multipleSelection: [],
        checkAll: false,
        searchInfo: {
          reportType: "",
          hasIntelligence: 0,
          reportNo: "",
          reportType: "",
          enterpriseNo: "",
          reportStatus:"",
          districtId: this.$store.state.userInfo.regionId,
          hasTrue: "",
          beginTime: '',
          endTime: '',
          page: 1,
          rows: 10,
        },
        //以下为编辑
        dialogFormVisible: false,
        centerLatLng:[],
        ruleFormEdit: {
          preImages:[],
          illegal:[],
          legal:[],
          reportImages:[],
          afterImages:[],
          reportNo:"",
          districtId:this.$store.state.userInfo.regionId,
          mobile:"",
          problemRemark:"",
          openid:"",
          enterpriseNo:"",
          reportStatus:"",
          id:""
        },

      }
    },
    components: {
      setAreaMap
     },
    created(){
      this.searchRowsInfo()

    },
    mounted(){
      this.$nextTick(()=>{
        //表格滚动
        this.tableHeight=document.querySelector(".reportManageWrap").clientHeight-200

      })
    },
    methods: {
      handleSizeChange(val) {
        this.searchInfo.rows = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.searchInfo.page = val;
        this.searchRowsInfo(val)

      },
      searchRowsInfo(val){
        val?"":this.searchInfo.page==1
        if (this.value6&&this.value6[0] != null) {
          this.searchInfo.beginTime = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchInfo.endTime = this.dtime(this.value6[1]).format('YYYY-MM-DD 23:59:59')
        } else {
          this.searchInfo.beginTime = ""
          this.searchInfo.endTime = ""
        }
        this.axios.post(process.env.API_HOST + `/vehicle/selectCaseGrid`, this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.rows = result.rows
              this.count = result.total;
            }
          })
      },
      handleChecked(){
        let arr=[]
        this.multipleSelection.forEach((item)=>{
          arr.push(item.detailId)
        })
        if(arr.length==0){
          this.$message({
            type: 'warning',
            message: '请先勾选需要结案的举报!'
          });
          return;
        }
        this.$confirm('确定结案所勾选的举报！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post( process.env.API_HOST +'/vehicle/closeCase', {
            detailIds:arr,
          })
            .then(response=>{
              if(response.data.code==200){
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.searchRowsInfo()
              }
            })
            .catch(error=>{
              console.log(error);
            });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });

      },

      changeFunImg(val){
        this.textImg=this.allImgs[val].photoType==1?"举报照片":this.allImgs[val].photoType==2?"处理前照片":this.allImgs[val].photoType==3?"处理后照片":""
      },

      changeFun(val) {
        this.multipleSelection = val
        this.checkAll = this.rows.length == val.length
      },
      toggleSelection(rows) {
        this.isCheckAll=!this.isCheckAll
        if (rows&&this.isCheckAll) {
          this.$refs.multipleTable.clearSelection();
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      prviewImg({url,allImgs}){
        this.allImgs=allImgs
          this.dialogVisible = true
       allImgs.forEach((item,key)=>{
          if(item.photoUrl==url){
            setTimeout(()=>{
              this.$refs.carousel.setActiveItem(key)
            },0)
          }
        })

      },
      //编辑
      handleEdit(row){
        this.allImgs=[]
        //初始化显示
        this.dialogFormVisible = true
        //获取行政区
        this.axios.get(process.env.API_HOST + '/wxpublic/detail?detailId='+row.detailId)
          .then(response => {
            const result = response.data
            if (result.state == 0) {
              this.ruleFormEdit = result.data
              this.centerLatLng=[this.ruleFormEdit.lng,this.ruleFormEdit.lat]
              this.allImgs=this.allImgs.concat(this.ruleFormEdit.reportImages,this.ruleFormEdit.preImages,this.ruleFormEdit.afterImages)
            }
          })

      },
      //删除
      handleDelete(index, row){
        this.$confirm('此操作将删除用户为 “'+row.reportNo+'”的信息 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = process.env.API_HOST + `/ulinkProblemFeedback/delete?id=${row.id}`
          this.axios.get(url, {withCredentials: true})
            .then(response => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.searchRowsInfo()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      submitFormEdit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.handleDiaSure()

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //重置
      resetInfo(){
        this.value6 = ""
        this.searchRowsInfo()
      },

    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .reportManageWrap
    page()
    .width500 .el-dialog
      min-width 400px


</style>
